<template>
  <div class="box">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
      style="padding-bottom: 20px;">
      <a-form-model-item label="访谈分类" prop="interviewClassificationId">
        <a-tree-select style="width:100%" allowClear :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
          :treeData="treeData" v-model="form.interviewClassificationId" @change="onChange" placeholder="请选择">
        </a-tree-select>
      </a-form-model-item>
      <a-form-model-item label="访谈主题" prop="interviewTheme">
        <a-input v-model="form.interviewTheme" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item class="sItem" label="是否启用模板">
        <a-switch v-model="form.delivery" @change="onSwitchChange" />
        <a-tooltip placement="rightBottom" style="position: absolute;left: 70px;top: 5px;"
          :overlayStyle="{ minWidth: `300px`, maxWidth: `400px` }">
          <template slot="title">
            <div>启用模板调取的是对应访谈分类下的访谈模板内容</div>
          </template>
          <a-icon type="question-circle" />
        </a-tooltip>
      </a-form-model-item>
      <InterviewItem ref="interviewItemId" :isHaveAnswer="true" />
      <a-form-model-item label="备注" style="margin-top:30px;">
        <a-textarea v-model="form.remark" placeholder="请输入" :auto-size="{ minRows: 4, maxRows: 6 }" />
      </a-form-model-item>
      <a-form-model-item label="布置家庭功课">
        <a-textarea v-model="form.homework" placeholder="请输入" :auto-size="{ minRows: 4, maxRows: 6 }" />
      </a-form-model-item>
      <a-form-model-item label="上传附件">
        <j-upload v-model="form.applyFile" :number="1"></j-upload>
        <p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p>
      </a-form-model-item>
    </a-form-model>
  </div>

</template>
<script>
import * as interviewApi from '@/api/sjsk/help/interview.js'
import InterviewItem from '@/views/sjsk/helpManage/modules/InterviewItem'
export default {
  components: { InterviewItem },
  data() {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 21 },
      form: {},
      rules: {
        interviewClassificationId: [{ required: true, message: '请选择' }],
        interviewTheme: [{ required: true, message: '请选择' }],
        description: [{ required: true, message: '请输入说明' }]
      },
      treeData: [],
      isSwitchOpen: false
    }
  },
  created() {
    // this.getTypeData()
  },
  methods: {
    onSwitchChange(e) {
      if (e) {
        this.isSwitchOpen = true
        console.log(this.form.interviewClassificationId)
        if (this.form.interviewClassificationId == undefined) {
          this.$message.warning("请选择访谈分类")
          return
        }
        this.getTemplateDetail() //读取模板内容
        this.form.isTemplate = 1
      } else {
        this.isSwitchOpen = false
        this.form.isTemplate = 2
      }
    },
    onChange(value, label) {
      // console.log(value, label)
      this.form.interviewClassification = label[0]
      // console.log(this.form.interviewClassification)
      if (this.isSwitchOpen) {
        this.getTemplateDetail() //读取模板内容
      }
    },
    getTypeData() {
      interviewApi.classificationTree().then((res) => {
        if (res.success) {
          this.treeData = res.result ? res.result : {}
        } else {
          this.$message.success(res.message)
        }
      })
        .catch((e) => {
          this.$message.warning(res.message)
        })
    },
    getTemplateDetail() {
      interviewApi.InterviewClassificationDetail(this.form.interviewClassificationId).then(res => {
        if (res.success) {
          if (res.result != null) {
            this.$set(this.form, 'interviewTheme', res.result.interviewTheme)
            this.$set(this.form, 'applyFile', res.result.applyFile)
            let obj = {
              base: res.result.base,
              analyze: res.result.analyze,
              expand: res.result.expand
            }
            this.$refs.interviewItemId.setData(obj)
          }
        }
      })
    },
    onValidate() {
      let isValid = false
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          isValid = true
        } else {
          isValid = false
        }
      })
      if (isValid) {
        return true
      } else {
        return false
      }
    },
    getData() {
      let itemData = this.$refs.interviewItemId.getData() //获取访谈访谈大纲
      if (itemData != undefined) {
        this.form = Object.assign(this.form, itemData)
        return this.form
      }
    },
    setData(obj) {
      if (this.form.interviewClassificationId == undefined) {
        this.$set(this.form, 'interviewClassificationId', obj.interviewClassificationId)
        this.$set(this.form, 'interviewTheme', obj.interviewTheme)
        this.form.isTemplate = obj.isTemplate
        if (obj.isTemplate == 1) {
          this.$set(this.form, "delivery", true)
        } else {
          this.$set(this.form, "delivery", false)
        }
        this.$refs.interviewItemId.setData({ base: obj.base, analyze: obj.analyze, expand: obj.expand })
      }
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current > this.moment().endOf('day')
    },

    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56]
      }
    }
  }
}
</script>
<style scoped lang="less">
.box {
  position: relative;
  width: 70%;
  // display: flex;
  margin: 0 auto;

  .ttTtem {
    /deep/ label {
      display: none;
    }
  }

  .p1 {
    font-weight: bold;
  }

  .btn {
    margin-left: 12.4%;
    width: 87.6%;
  }

  .sItem {
    /deep/.ant-col-24 {
      width: 40%;
    }

    /deep/.ant-form-item-control-wrapper {
      position: relative;
      // top: -10px;
    }
  }
}

/deep/.ant-form-item {
  margin-bottom: 10px;
}

/deep/.ant-col-sm-3 {
  width: 10.5%;
}

/deep/.ant-col-sm-21 {
  width: 89.5%;
}
</style>
